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8+ лет во фронтенде 
ех. Coins.ph 
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Vadim Tsaregorodtsev (@hadoocken) 


a javascript enthusiast trying to prove that any JS dev is not just a pixel-mover. 


| contribute to open-source and make my own: 


е Remark - Al-powered AWS-based bookmark manager 


е Delete-Issue - Github action allows you to delete issues from the repo 


Vadim Tcaregorodtcev е AWS Api Gateway starter-template with Lambda апа DynamoDB 
vtcaregorodtcev 
| speak public: 
Edit profile 
e Javascript developer of many faces. [RU] - Codefest, Online, May 2022 
Әд 8 followers - 15 following * React to Svelte. The almost easy way. [RU] - Svelte Russia Meetup #1, Moscow, Feb20 


• Write these tests now. [RU] - PiterJs #43, Saint-Petersburg, December 2019, Infobip 
@EPAM-JS-Competency-center 


© Saint Petersburg | write "2 mins dev's notes": 
ЕЛ dev.tcaregorodtcev@gmail.com 


ВЕАОМЕ.та 


2minsDevsNotes 


Github-based fast-to-read blog about dev's daily routine challenges 


Featured on 
tech-blogs.dev 


#5 Making config server serverless with AWS API Gateway and DynamoDB 
#4 Automatization for github-based blog 

#3 Remix is like ember but only it's react and SSR as well 

#2 How and why to set up a hybrid fake server? 


#1 Your team lead left a company, and you as the last most mature engineer should start a new project? 


@ vtcaregorodtcev 
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W у hadoocken 


Начнем с того, что Мавни 
фронтенд бъл мертв. 


- Где мы, вообще, и что 
происходит? 

- Как мы сюда попали? 

- Что будет дальше? 


Ebenezer Scrooge coding 
at the computer. 


© Midjorney 


Дух прошлого 
Internet Explorer 


е 


Доля рынка браузеров (1996 - 2009) 


[ ]Others (Opera, Safari, PSP...) 
lll Firefox, Mozilla, Camino, etc. 


M Netscape classic 
[] Internet Explorer for Windows 


Конец 80-х 1991 1994 


Интернет НТМЕ Netscape М. 
VS 
Microsoft IE 


E] This site is best viewed with your eyes open and SHOCKWAVE 6.0. 
Oh yeah, NETSCAPE 4.04 helps as well. 


WORLD OF COCA-COLA 


blog.csssr.com 


Best Viewed With 


17) Microsoft 


Click here to download 
Internet Explorer now 


speakerdeck.com/brucel/state-of-the-browser-2022 


Одинаковые Промежутки времени 
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Microsoft Internet Microsoft Internet Microsoft Internet Microsoft Internet Microsoft Internet 
Explorer 2.0 Explorer 4 Explorer 6 Explorer 8 Explorer 10 


— ИЕ, зачем ты это 
рассказываешь? — 
спросил Скрудж. 


Ebenezer Scrooge talk to 
the ghost. 


© Collective art 
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История фрочтенда. 
JavaScript как 
отражение новой 
эпохи 


ИЕ продолжал рассказ... 


Круто, когда происходят 
легендарные события, но 
какой толк, если 
страдают обычные 
разработчики? 


И разработчики захотели 
вернуть контроль себе! 
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www.webstandards.org 


С55-фреймворки начала 2000-х 


Qu 
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Все! Я понял! Хочешь 
сделать — сделай сам?! — 
в гневе завопил Скрудж. 


Дослушай — ответил дух. 


Доля рынка браузеров (2011 - 2021) 


mn Chrome E Internet Explorer E Firefox m Safari |] Орега 


Edge 
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2018 2019 2020 2021 


ММ» 


Knockout, Backbone, Ember.js, Angular.js 


Make К work 
Make it right 


Make it fast 


Это, вообще, работает? 
Сделай нормально 


Перепиши на nlog(n) 


Маке її 


Дух ИЕ, произнеся последние слова, 
испарился, оставив Скруджа наедине с 
самим собой. 


Скрудж отправился спать, но долго не мог 
заснуть, гоняя мысль — зачем что-то 
исправлять, если все и так работает? 


На следующее утро, Скруджа разбудил шум 
в комнате. Кто-то громко читал книгу. 


1. Диета? 
2. Запасы? 


Дух настоящего 
Next.js 


N 


Мне передали, ты хотел 
узнать как делать 
правильно? — начал дух. 


Скрудж кивнул головой... 


Компоненты VDOM 


Поток данных Один код для 
в одну сторону всех платформ 


Стейт-менеджер для |5-фреймворка 


Динамика популярности % <> а 


Анонс Реакта 
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Create React App 


== Prettier 


чуть-чуть 
можно 


- Мы придумали 

вам стандарт! 
- Но кавычки!? 
- Ладно))0) 


Releases 83 


Су v5.0.1 


on 12 Apr 


+ 82 releases 


Реакт-«разработчик» 


ОХ для нас все 


Ты хочешь сказать, что 
добавить новый слой 
абстракции на другой 
слой абстракции — спасет 
фронтенд? 


Когда разработчики, не 
понимающие основы JS и 
умеющие писать только 
на реакте, теперь даже с 
реактом перестанут 
взаимодействовать? 


o зачем vite если есть некст? 46:34 
фа для одной страницы? 4554 27 


Дух перевел дух. Ты не 
понимаешь, это другое. 


Это все это попытки 
увести фокус от истины. 


Я, может быть, и не самый 
первый, и меня 
используют чаще, как 
более удачное решение, 
но я точно не последний. 


Lee Robinson @ 
1) @leeerob 


When there's competition in DevTools, developers win: 


+ Svelte is pushing React 

+ Remix is pushing Next.js 

% Prisma is pushing ORMs 

+ Deno is pushing Node.js 

+ Supabase is pushing Firebase 

+ esbuild / SWC are pushing JS tooling 
+ Bun is pushing SWC 


What else? 


The React Framework 
for Production 


Next.js gives you the best developer experience with all the features you need for production: hybrid static & server 


rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. 


IN 


The Intuitive Vue 
Framework 


Build your next Мие. 5 application with confidence using Nuxt. 
An open source framework making web development simple and powerful. 


Make it right 


or make it not not right 


Маке її 
right 


State of js 2019 


Prediction Award 


Awarded to an up-and-coming technology that might take 


over... от not? 


{F1 


Sv 


Svelte 


Павел Малышев 
Mustlab 


SvelteJS under the hood 
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IRON MAA | 
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Sveltekit 


State of Js 9091 


RANKINGS % 


Satisfaction, interest, usage, and awareness ratio rankings. 


Satisfaction | Interest Usage Awareness 


React 


Vue.js Svelte 


Angular React 


Vanilla 

Solid 1.0.0 
Inferno 7.4.8 
Svelte 3.37.9 
Preact 10.5.12 
Vue 3.0.6 
React 17.0.1 
Angular 12.0.1 


Ember 3.22.0 
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SolidStart 


Оу/іК 


1. Верстка кнопки 
2. Желание нажать 
3. Загрузка клик-хэндлера 


Е How to remove 99% of ... 
2022 


© Оулк 


Ап open source framework for 
5-10x faster websites — Shift я 


Total Blocking Time 


» Full page Е > Е at scale 


» Easy to adopt (1 command for dev, one click in Builder) 


» Created by Misko, creator of Angular (used by millions) 


» Funnels directly into and deeply supported by Builder 


... JavaScript from main thread 
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ІШ — 
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Разработка  Єберка  Деплой 


Неадег “арр” 


Server-rendered HTML. Content, text, images, etc. 


Advertisement 


(server-rendered) Footer (server-rendered HTML) 


2emix м 
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Agnostic meta web framework 


utimate4p2-8-amazing-HhaHux 


User 


Framework X 


meta-Framework-handler 


Platform X 


export async function loader({ request |) 4 


export async function action({ request }) { 


export function links() 4 
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MPA Ha островах 
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За это фронтенд надо 
любиты! 


Когда есть тот, кому не 
все равно, экосистема 
развивается. 


Без конкуренции все 
вырождается и умирает. 
Пример с ИЕ 
показательный. 


И как мне нужно себя 
вести? - спросил Скрудж. 


хвалить нельзя критиковать 


Промежуточньее итоги! 


Все против всех. Нужно, 
чтобы работало везде 


Работает везде, но 
можно оптимизировать 


— 00 


Нужно придумать заново, 
и чтобы было просто 


—O—O—O 


Блин, «просто» сделать 
СЛОЖНО 


—O—O—O—O 


Блин, теперь медленно 


Join the GitHub Copilot waitlist 


Дух будущего 
Github Copilot 


— А ты кто такой? Два 
митинга подряд никто не 
ставит! - нервно спросил 


скрудж. 


— Ну как же? Ты что не 
хочешь узнать что будет 
дальше? — отвечал дух. 


Скрудж промолчал ... 


Сложность 


Время 


What is Ше ТЗ Stack? 


The “ТЗ Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack 
typesafety. It consists of: 


е Next.js 

e {КРС 

e Tailwind CSS 
e TypeScript 

e Prisma 

e NextAuth.js 
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Remix 


Е @ Architect @ Fly.io Шо... ( Prisma 


tailwindcss @)press.io tailwindess @)press.io 


R Remix Notes 


па 


@ Fly.io 


tailwindcss 
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blues-stack-template.fly.dev 


@)press.io 
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Писать машинный код 


Писать код 
на высокоуровневом языке 


Разговаривать с колонкой 


Виталий 


я Полещук 
Server-driven UI А 
ксТим (ех-Ассепішге) 
в вебе. Не пиши, 
а описывай Степа 
свой фронтенд Михайлюк 
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Giannis Daras 
@giannis_daras 


DALLE-2 has a secret language. 

"Apoploe vesrreaitais" means birds. 

"Contarra ccetnxniams luryca tanniounons" means 
bugs or pests. 


The prompt: "Apoploe vesrreaitais eating Contarra 
ccetnxniams luryca tanniounons" gives images of birds 
eating bugs. 


A thread (1/п) B. 


8:44 РМ · 31 мая 2022 г. - Twitter Web App 


2257 ретвитов 1095твитовсцитатами 8 275 отметок «Нравится» 


Books › Computers & Technology » Computer Science 


Look inside 3, 


N ASHLEY 


THE ART 


OF PROMPTS 


FOR ARTIFICIAL INTELLIGENCE 


LiveDOok Al 


The Art of Prompts for Artificial Intelligence: Make art with 


DALL-E, Midjourney and Livebook Al Paperback – August 24, 
2022 


by Kevin Ashley ~ (Author) 
ЖЖЖ У 8ratings 
Part of: Awesome Al (2 books) 


See all formats and editions 


Kindle Paperback 
$10.99 $29.00 


Read with Our Free App 1 New from $29.00 


The Art of Prompts, is a great resource for anyone interested in digital arts and artificial intelligence. Includes hundreds of 
illustrations and tips on making beautiful digital art with Midjourney, DALL-E and other artificial intelligence tools. Enjoy 
browsing through a gallery of hundreds of illustrations made with prompts, try them yourself and have fun! 
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- нет стейт-менеджеров 
- формы для данных и 
навигации 


<Form method="post"> 


<input type="hidden" name="action" value="create" /> 


<button type="submit">Create</button> 


</Form> 


Є Radix 


Why waste 
time reinventing 
Ul components? 


Unstyled, accessible components for building 
high-quality design systems and web apps in React. 


Install Primitives > 


Дух закончил рассказ и 
обратился к Скруджу. 


— У тебя заканчивается 
триальное время. 
Переходи к выводам. 


Скрудж кивнул головой и 
дух исчез... 


Где мы находимся? 


Маке її Make it 
right fast 
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